import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Image, Modal, Dimensions } from 'react-native';
import HTTP from '../../../../../../utils/http';
import { API, API_GENERATE } from '../../../../../../config/api';
import { GLOBAL } from '../../../../../../config/global';
import { orderStyle, commonStyle } from '../../_common/style';
import { style } from '../../../../../../theme/style'
import ModalPicsComponent from '../../_components/ModalPicsComponent';
import { MDMCodeCpt } from "../../../../highSeas/_components/MDMCodeCpt";

const scale = GLOBAL.SCALE;
const modalPicDelCfg = {
    visible: false,
    urls: [],
    picPress: () => { },
}
export class BaseInfoCpt extends Component {
    constructor(props) {
        super(props);
        this.state = {
            previewModalVisible: false
        }
    }

    async getImgView (qualificationAddress) {
        const qualificationArr = qualificationAddress.split(',');
        qualificationArr.map(async (fileId, index) => {
            await this.loadedImgs(fileId, qualificationArr.length, index);
        })
    }

    async	loadedImgs (fileId, length, index) {
        const response = await HTTP.GET(API_GENERATE(API.GET_IMG_VIEW), { fileId });
        if (response && response.image && response.image.length) {
            modalPicDelCfg.visible = true;
            modalPicDelCfg.urls.push({
                url: response.image,
                width: Dimensions.get('window').width
            });
            modalPicDelCfg.picPress = () => {
                modalPicDelCfg.visible = false;
                modalPicDelCfg.urls = [];
                this.setState({
                    previewModalVisible: false,
                });
            }
        }

        if (length - 1 == index) {
            this.setState({
                previewModalVisible: true
            });
        }
    }

    render () {
        let { data, iWidth } = this.props || {};
        return (
            <View style={[commonStyle.row3, { paddingTop: 10 * scale }]}>
                <Text style={data.type && data.type == 'T' ? styles.subTitle : orderStyle.lable}>{data.lable}</Text>
                <View style={orderStyle.valueBox}>
                    {
                        data.value ?
                            data.value.map((item, index) => {
                                return (
                                    <View key={index} style={[{ width: iWidth ? iWidth * scale : 230 * scale }, commonStyle.row3, orderStyle.lineFeed, index != 0 ? orderStyle.notFirst : null]} >
                                        {
                                            data.fileId ?
                                                <Text onPress={() => { data.fileId && this.getImgView(data.fileId) }}
                                                    style={[orderStyle.value, { color: data.fileId ? '#0091FF' : '#0091FF' }]} >
                                                    {data.fileId ? '【查看附件】' : '未上传'}
                                                    <Text style={orderStyle.value}>{data.type == 'C' ? item : ''}</Text>
                                                </Text>
                                                : <Text style={[orderStyle.value, data.changeIndex ? styles.changeText : null]}>{item}</Text>
                                        }
                                        {data.changeIndex && <Text style={styles.changeText}>(变)</Text>}
                                        {data.changeText && <Text style={styles.changeText}>({data.changeText})</Text>}
                                        {data.icon && <TouchableOpacity onPress={() => data.iconPress && data.iconPress()} >
                                            <Image source={data.icon} style={[styles.dataIcon, data.iconStyle || '']} />
                                        </TouchableOpacity>}
                                        {
                                            data.isMdmCode ? <View style={{paddingLeft:5*scale}}><MDMCodeCpt /></View> : null
                                        }
                                        {data.rightButtonText &&
                                            <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
                                                <TouchableOpacity style={styles.rightButton} onPress={() => data.rightButtonPress && data.rightButtonPress()} >
                                                    <Text style={styles.rightButtonText}>{data.rightButtonText}</Text>
                                                </TouchableOpacity>
                                            </View>}
                                    </View>
                                )
                            }) : null
                    }
                </View>
                <ModalPicsComponent {...modalPicDelCfg} />
                {/* <Modal
                    animationType={"fade"}
                    transparent={true}
                    visible={this.state.previewShow}
                    onRequestClose={() => { }}>
                    <TouchableOpacity activeOpacity={1} style={styles.preview} onPress={() => this.setState({ previewShow: false })}>
                        <Image source={this.state.previewSource} style={{ width: '100%', height: '50%' }} />
                    </TouchableOpacity>
                </Modal> */}
            </View >
        )
    }
}

const styles = StyleSheet.create({
    preview: {
        height: GLOBAL.SCREEN_HEIGHT,
        backgroundColor: 'rgba(0,0,0,.5)',
        alignItems: 'center',
        justifyContent: 'center'
    },
    subTitle: {
        marginTop: 10 * scale,
        marginLeft: 8 * scale,
        fontSize: 12 * scale,
        color: '#34475F'
    },
    changeText: {
        color: style.color.fontRed1,
        fontSize: 12 * scale,
        paddingLeft: 5 * scale
    },
    dataIcon: {
        marginLeft: 10 * scale,
        width: 15 * scale,
        height: 15 * scale
    },
    rightButton: {
        borderWidth: 1,
        borderColor: style.color.themeColor,
        borderRadius: 7 * scale,
        padding: 2 * scale,
        marginRight: 14 * scale
    },
    rightButtonText: {
        fontSize: 10 * scale,
        color: style.color.themeColor,
    }
})